<template xmlns="http://www.w3.org/1999/html">
  <!-- 文章详情页面 -->
  <div class="article-container">
    <!-- 顶部清除浮动线 -->
    <div class="line-top"></div>
    <!-- 中间整个容器 -->
    <div class="container-in">
      <!-- 左边大容器 -->
      <div class="main">
        <!-- 文章详情 -->
        <div class="article-box">
          <div>
            <h2>{{ article.title }}</h2>
          </div>
          <div>
            <!-- 跳转到一级分类 -->
            <a :href="'/?current=1&size=10&createTime=1&categoryPid=' + article.categoryPid"
               :title="'一级分类'+ article.categoryParentName">
              <el-tag effect="dark" type="danger">{{ article.categoryParentName }}</el-tag>
            </a>
            <!-- 跳转到二级分类 -->
            <a :href="'/?current=1&size=10&createTime=1&categoryPid=' + article.categoryPid
                             + '&categoryId=' + article.categoryId" :title="'二级分类'+ article.categoryName">
              <el-tag effect="dark">{{ article.categoryName }}</el-tag>
            </a>
            <span>&nbsp;&nbsp;<i class="el-icon-view"/> {{ article.viewCount }}</span>
            <el-divider direction="vertical"/>
            <span class="sm-hidden"><i class="el-icon-chat-dot-round"/> </span>
            <el-divider direction="vertical" class="sm-hidden"/>
            <span class="iconfont icon-zan1 sm-hidden"> </span>
            <el-divider direction="vertical" class="sm-hidden"/>
            <span class="sm-hidden"><i class="el-icon-star-off fs16"/> </span>
            <el-divider direction="vertical" class="sm-hidden"/>
            <span class="sm-hidden"><i class="el-icon-coin"/> </span>
            <el-divider direction="vertical" class="sm-hidden"/>
            <span><i class="el-icon-time"/> {{ article.createTime }}</span>
          </div>
          <div class="article-refuse">
            <span>⛔ 转载请注明出处</span>
          </div>
          <div class="article-content">
            <!-- 文章内容 -->
            <div class="content" v-html="article.content"></div>
            <!-- 修改时间 -->
            <div class="update-time">
              <span v-if="article.createTime !== article.updateTime">最近更新 {{ article.updateTime }}</span>
            </div>
            <div class="do-article">
              <div class="flex"></div>
              <div v-if="userId == article.userId">
                <el-tooltip placement="top">
                  <div slot="content">
                    <!-- 编辑文章 -->
                    <p><a class="el-icon-edit-outline ico-btn" :href="'/article/edit-article/?id='+ article.id"/></p>
                    <br>
                  </div>
                  <!-- 。。。 -->
                  <i class="el-icon-more-outline"/>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
        <!-- /文章详情 -->
        <!-- 子组件-留言区-->
      </div>
      <!-- 右则边栏 -->
      <template>
        <!-- 经历主人头像 -->
        <div class="aside" v-if="article.masterUrl">
          <!-- 经历主人头像 -->
          <el-card>
            <img class="sidle-avatar" :src="article.masterUrl" alt="">
            <div class="master-name">
              <b>{{ article.masterName }}</b>
            </div>
          </el-card>
        </div>
        <!-- 作者头像 -->
        <div class="aside" v-if="!article.masterUrl">
          <el-card class="box-card">
            <a :href="'/user/'+article.userId">
              <img class="sidle-avatar" :src="article.avatar" alt="">
            </a>
            <el-divider content-position="center">作者</el-divider>
            <div>
              <a :href="'/user/'+article.userId">
                <div class="username">
                  <b>{{ article.username }}</b>
                </div>
              </a>
            </div>
          </el-card>
        </div>
      </template>
      <!-- /右则边栏 结束 -->
    </div>
    <!-- 底部清除浮动线 -->
    <div class="line-bottom"></div>
  </div>
</template>
<script>

export default {
  name: 'article-detail',

  // 校验id为数值才可访问此组件
  validate({params}) {
    return /^\d+$/.test(params.id)
  },
  // 动态标题
  head() {
    return {
      title: this.article.title + ' - 经历网',
    }
  },
  // 服务端获取数据
  async asyncData({params, app, store}) {
    // 获取路由ID
    const routeId = params.id
    // 获取当前登录用户ID和头像 ( 方法参数上传入 store 才能获取 )
    const userId = store.state.userInfo && store.state.userInfo.id || 0
    const avatar = store.state.userInfo && store.state.userInfo.avatar || ''
    // 根据路由上的文章ID获取文章详情
    const {data: articleInfo} = await app.$getArticleById(routeId)
    const article = articleInfo.articleInfo
    // 文章作者ID，传给评论子组件，判断是否作者
    const authorId = article.userId
    return {
      routeId,
      userId,
      avatar,
      article,
      authorId
    }
  },
  data() {
    return {
    }
  },
  methods: {
    // 刷新文章详情
    async fetchData() {
      const {data} = await this.$getArticleById(this.article.id)
      this.article = data.articleInfo
    }
  }
}
</script>
<style lang="less" scoped>


// 原创背景颜色
.article-container .main .article-box div .el-tag--dark.el-tag--danger[data-v-a30a8e90] {
  border-color: #ab1b4a;
  background-color: #ab1b4a;
}

.big-icon {
  font-weight: bold;
  font-size: 28px !important;
  color: #747474;
}

.icon-shoucang-shoucang {
  font-weight: bold;
  font-size: 31px !important;
}

.big-star {
  font-weight: bold;
  font-size: 33px !important;
}

.big-icon:hover, .big-star:hover {
  font-weight: bold;
  color: #d95107;
}

.icon-zan1 {
  font-size: 21px;
}

.ico-btn {
  font-size: 25px;
  color: white;
}

.icon-zengbi, .el-icon-star-off, .icon-zan1 {
  cursor: auto;
  color: #5e6165;
}

// 最外层容器
.article-container {
  background-color: #242424;

  // 页面左则容器、右则容器
  .main, .aside {
    background-color: #242424;
  }

  .main {

    h2 {
      margin-bottom: 20px;
    }

    // 文章详情区域
    .article-box {
      border-radius: 4px;
      background-color: #FFFFFF;

      div {
        // 原创、分类名标记
        .el-tag {
          color: white;
        }

        // 原创标记颜色和边框颜色
        .el-tag--dark.el-tag--danger {
          border-color: #DB7093;
          background-color: #DB7093;
        }

        // 文章标题下各项总数
        span {
          font-size: 14px;
          color: #5f6163;
        }
      }

      .article-content {
        line-height: 27px;

        .content {
          font-size: 18px;
        }

        .update-time {
          display: flex;
          justify-content: right;
        }

        .do-article {
          display: flex;
          justify-content: space-between;

          .flex {
            .el-tooltip > span {
              font-size: 14px;
            }

            a {
              font-size: 25px;

              span {
                font-size: 18px;
              }
            }
          }

          div {
            span {
              font-size: 25px;
            }
          }
        }
      }

      .article-refuse span {
        font-weight: bold;
      }
    }
  }

  // 右则边栏公共样式
  .aside {
    margin-bottom: 20px;
    border-radius: 4px;

    // 作者、经历主人头像
    .sidle-avatar {
      width: 100%;
      border-radius: 4px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    }

    .master-name {
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }

    .username {
      display: flex;
      justify-content: center;
    }

    .el-button {
      width: 100%;
      color: #cccccc;
      background-color: black;
    }

    .el-button:hover {
      color: white;
    }

    .tex-box {
      padding: 20px;
    }
  }
}

// md
@media screen and (min-width: 960px) {

  .article-container .container-in .main .article-box .article-content[data-v-a30a8e90] {
    padding: 20px 50px;
  }

  // 最外层容器
  .article-container {

    .container-in {
      width: 80%;
      margin: 0 auto;
      padding-bottom: 26px;

      .main {
        width: 75%;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
        float: left;

        .article-box {
          padding: 50px 120px;

          .article-content {
            padding: 30px;
          }

          .article-refuse {
            margin-top: 20px;
            padding-left: 30px;
          }

          .flex {
            display: flex;
            justify-content: space-around;
            width: 50%;
          }
        }
      }

      .aside {
        width: 23%;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
        border-radius: 4px;
        float: left;
        margin-left: 26px;
      }
    }
  }
}

// sm
@media screen and (max-width: 960px) {

  // 最外层容器
  .article-container {

    .container-in {
      width: 100%;
      clear: both;
      padding-bottom: 20px;

      .main {
        width: 100%;
        margin: 0 auto;

        .article-box {
          padding: 20px;

          .article-content {
            padding: 30px 0 50px;
          }

          .article-refuse {
            margin-top: 10px;
          }

          .flex {
            display: flex;
            justify-content: space-around;
            width: 80%;
          }
        }
      }

      .aside {
        width: 100%;
        margin: 5px auto 0;
      }
    }
  }

}
</style>
